﻿@{
    ViewBag.Title = "Register";
}

<h2>千百意花卉商城</h2>
<link href="~/static/h-ui/css/H-ui.min.css" rel="stylesheet" />
<link href="~/static/h-ui.admin/css/H-ui.login.css" rel="stylesheet" />
<link href="~/static/h-ui.admin/css/style.css" rel="stylesheet" />
<link href="~/lib/Hui-iconfont/1.0.8/iconfont.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<div class="loginWraper">
    <h2 style="text-align:center;margin-top:30px;">千百意花卉注册页面</h2>
    <div id="loginform" class="loginBox">

        <form class="form form-horizontal" action="index.html" method="post">
            <div class="row cl">
                <label class="form-label col-xs-2"><i class="Hui-iconfont">&#xe60d;</i></label>
                <div class="formControls col-xs-10">
                    <input id="Name" name="name" type="text" placeholder="用户名" class="input-text size-L"><span id="s1" style="color:red"></span>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-2"><i class="Hui-iconfont">&#xe60d;</i></label>
                <div class="formControls col-xs-10">
                    <input id="tel" name="tel" type="text" placeholder="手机号码" class="input-text size-L"><span id="s2" style="color:red"></span>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-2"><i class="Hui-iconfont">&#xe60e;</i></label>
                <div class="formControls col-xs-10">
                    <input id="Pwd" name="pwd" type="password" placeholder="密码" class="input-text size-L"><span id="s3" style="color:red"></span>
                </div>
            </div>
            <div class="row cl">
                <div class="formControls col-xs-10 col-xs-offset-2">
                    <input id="yan" class="input-text size-L" type="text" placeholder="短信验证码" onblur="if (this.value == '') { this.value = '短信验证码:' }" onclick="    if (this.value == '验证码:') { this.value = ''; }" value="" style="width:250px;">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="button" style="height:32px;width:70px;" class="btn-primary" value="发送验证码" onclick="sendCode(this)" /><span id="s4" style="color:red"></span>

                </div>
            </div>


            <div class="row cl">
                <div class="formControls col-xs-8 col-xs-offset-3">

                </div>
            </div>
            <div class="row cl">
                <div class="formControls col-xs-10 col-xs-offset-2">
                    <input name="" type="button" class="btn btn-success radius size-L" value="&nbsp;注&nbsp;&nbsp;&nbsp;&nbsp;册&nbsp;" onclick="register()">
                    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

                    <input name="" type="button" class="btn btn-success radius size-L" value="&nbsp;取&nbsp;&nbsp;&nbsp;&nbsp;消&nbsp;" onclick="login()">

                </div>
            </div>
        </form>
    </div>
</div>

<script>

    var clock = '';
    var nums = 30;
    var btn;
    function sendCode(thisBtn) {
        btn = thisBtn;
        var result = isPhoneNum();
        if (result)
        {
            btn.disabled = true; //将按钮置为不可点击
            btn.value = nums + '秒后可重新获取';
            clock = setInterval(doLoop, 1000); //一秒执行一次
            daojishi();
        }
    }
    //倒计时
    function daojishi() {
        $.ajax({
            type: "post",
            url: "/Home/YanZheng",
            data: { tel: $("#tel").val() },
            dataType: "json",
            success: function (o) {
                if (o.success == true) {

                }
                else {
                    alert("发送失败");
                }
            }
        })

    }
    function doLoop() {
        nums--;
        if (nums > 0) {
            btn.value = nums + '秒后可重新获取';
        } else {
            clearInterval(clock); //清除js定时器
            btn.disabled = false;
            btn.value = '发送验证码';
            nums = 30; //重置时间
        }
    }

    //校验手机号是否合法
    function isPhoneNum() {
        var tel = $("#tel").val();
        var myreg = /^1(3|4|5|7|8)\d{9}$/;
        if (!myreg.test(tel)) {
            alert('请输入有效的手机号码！');
            return false;
        } else {
            return true;
        }
    }
 

    //实现注册
    function register()
    {
        var name = $("#Name").val();
        var tel = $("#tel").val();
        var pwd = $("#Pwd").val();
        var yan = $("#yan").val();

        var myreg = /^1(3|4|5|7|8)\d{9}$/;
   
        if(name==""||name==null)
        {
            $("#s1").html("用户名不能为空"); return;
        } else {
            $("#s1").html("");
        }
        if(tel==""||tel==null)
        {
            $("#s2").html("手机号不能为空"); return;
        } else {
            $("#s2").html("");
        }
        if (!myreg.test(tel)) {
            $("#s2").html("手机号格式不正确"); return;
        }
        else {
            $("#s2").html("");
        }
        if (pwd == "" || pwd == null) {
            $("#s3").html("密码不能为空"); return;
        } else {
            $("#s3").html("");
        }
        if (yan == "" || yan == null) {
            $("#s4").html("验证码不能为空"); return;
        } else {
            $("#s4").html("");
        }
        $.ajax({
            type: "post",
            url: "/home/registerdo",
            data: { name: name, pwd: pwd, tel: tel, yan: yan },
            success:function(result)
            {
                if (result == 3)
                {
                    alert("手机号已经存在，请更换手机号");
                    return;
                }

                if (result == 2)
                {
                    alert("输入的验证码不正确");
                    return;
                }
                if(result==1)
                {
                    alert("注册成功");
                    location.href = "/home/login";
                }else
                {
                    alert("注册失败");
                }
            }

        })
       
    }
</script>